rAmChart package

The package rAmChart allows to draw JavaScript charts wich are by nature interactive. Its architecture is based on S4 classes and corresponds almost exactly to the original library AmCharts.

We do not focus on the htmlwidgets features which make a such API realizable. For more details consult directly http://www.htmlwidgets.org.

Getting started

pipeR

By loading the package, you will note that it is plainly compatible with other plot methods since it uses S4 signature for each functionnality.

## Loading required package: htmlwidgets
## Loading required package: shiny
## Loading required package: rlist
## Loading required package: pipeR
## Loading required package: data.table
## 
## Attaching package: 'rAmChart'
## 
## The following object is masked from 'package:graphics':
## 
##     title

For the next part of this short introduction, you will always see the symbole %>>% from the package pipeR. If you want more details, you can refer to the its tutorial, but in this context we just have to keep in mind that thanks to this the code before is evaluated and passed as the first argument of the function which follow %>>% or it can can be any argument by indicating a . using () or {}.

For example:

data(iris)
summary(iris, digits = 2)

##   Sepal.Length  Sepal.Width   Petal.Length  Petal.Width        Species  
##  Min.   :4.3   Min.   :2.0   Min.   :1.0   Min.   :0.1   setosa    :50  
##  1st Qu.:5.1   1st Qu.:2.8   1st Qu.:1.6   1st Qu.:0.3   versicolor:50  
##  Median :5.8   Median :3.0   Median :4.3   Median :1.3   virginica :50  
##  Mean   :5.8   Mean   :3.1   Mean   :3.8   Mean   :1.2                  
##  3rd Qu.:6.4   3rd Qu.:3.3   3rd Qu.:5.1   3rd Qu.:1.8                  
##  Max.   :7.9   Max.   :4.4   Max.   :6.9   Max.   :2.5

is equivalent to:

library(pipeR)
data(iris)
iris %>>% summary( digits = 2 )

##   Sepal.Length  Sepal.Width   Petal.Length  Petal.Width        Species  
##  Min.   :4.3   Min.   :2.0   Min.   :1.0   Min.   :0.1   setosa    :50  
##  1st Qu.:5.1   1st Qu.:2.8   1st Qu.:1.6   1st Qu.:0.3   versicolor:50  
##  Median :5.8   Median :3.0   Median :4.3   Median :1.3   virginica :50  
##  Mean   :5.8   Mean   :3.1   Mean   :3.8   Mean   :1.2                  
##  3rd Qu.:6.4   3rd Qu.:3.3   3rd Qu.:5.1   3rd Qu.:1.8                  
##  Max.   :7.9   Max.   :4.4   Max.   :6.9   Max.   :2.5

or even

library(pipeR)
data(iris)
iris %>>% ( summary(object = ., digits = 2) )

##   Sepal.Length  Sepal.Width   Petal.Length  Petal.Width        Species  
##  Min.   :4.3   Min.   :2.0   Min.   :1.0   Min.   :0.1   setosa    :50  
##  1st Qu.:5.1   1st Qu.:2.8   1st Qu.:1.6   1st Qu.:0.3   versicolor:50  
##  Median :5.8   Median :3.0   Median :4.3   Median :1.3   virginica :50  
##  Mean   :5.8   Mean   :3.1   Mean   :3.8   Mean   :1.2                  
##  3rd Qu.:6.4   3rd Qu.:3.3   3rd Qu.:5.1   3rd Qu.:1.8                  
##  Max.   :7.9   Max.   :4.4   Max.   :6.9   Max.   :2.5

---

Quick tour:

Example

Begin with a simple pie chart

library(rAmChart)
amPieChart(theme ="light", titleField = "key", valueField = "value"
) %>>% setDataProvider(data.frame(key = c("FR", "US"), value = c(20,10))
) %>>% setLegend( position = "right"
) %>>% plot

Details…

If you would have seen the same example from a demonstration on http://www.amcharts.com/demos/, you’d read a javascript source code like this:

{
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "FR",
"litres": 20
}, {
"country": "US",
"litres": 10
}],
"valueField": "litres",
"titleField": "country",
}

Although the syntax appears very different, it has similarities. If you observe the result before calling the plot method, you see a global list containing each parameter precised in the code:

library(rAmChart)
amPieChart(theme ="light", titleField = "key", valueField = "value"
) %>>% setDataProvider(data.frame(key = c("FR", "US"), value = c(20,10))
)

## $pathToImages
## [1] "http://www.amcharts.com/lib/3/images/"
## 
## $titleField
## [1] "key"
## 
## $valueField
## [1] "value"
## 
## $dataProvider
## $dataProvider[[1]]
## $dataProvider[[1]]$key
## [1] FR
## Levels: FR US
## 
## $dataProvider[[1]]$value
## [1] 20
## 
## 
## $dataProvider[[2]]
## $dataProvider[[2]]$key
## [1] US
## Levels: FR US
## 
## $dataProvider[[2]]$value
## [1] 10
## 
## 
## 
## $theme
## [1] "light"
## 
## $type
## [1] "pie"

This list can be easily mapped to the previous JavaScript code with the following tips:

• A JavaScript object corresponds to a list in R
• A JavaScript array (a wrapper for object) also corresponds to a list in R

This structure and equivalencies are fundamental to construct charts with the package.

The key thing is to imagine the function

library(rAmChart)
amPieChart(theme ="light", titleField = "key", valueField = "value")

as an initializer of an S4 class which is a list copntainer for every property.

library(rAmChart)
class(amPieChart())

## [1] "AmChart"
## attr(,"package")
## [1] "rAmChart"

• Each element put in the function is a first level property.
• Other complex first level property, like dataProvider, has its dedicated function whose the first argument is always an object of S4 class AmChart (or AmStock).

Customization…

Currently you can draw any chart from: * http://docs.amcharts.com/3/javascriptcharts * http://docs.amcharts.com/3/javascriptstockchart

That means you can customize you chart in various ways !

For instance, we can move the default linked label JS chart by amCharts, which must be kept for using the library without license. We also can switch the theme:

library(rAmChart)
amPieChart(theme ="chalk", titleField = "key", valueField = "value",
           creditsPosition = "bottom-left"
) %>>% setDataProvider(data.frame(key = c("FR", "US"), value = c(20,10))
) %>>% setLegend( position = "right"
) %>>% plot

Few demos

Basics

amXYChart

library(rAmChart)
amXYChart(theme = "default", startDuration = 0.5, marginLeft = 46, marginBottom = 35
) %>>% setDataProvider(data.frame( y = c(10,5,-10,-6,15,13,1),  x = c(14,3,8,5,-4,1,6),
                                   value = c(59,50,19,65,92,8,16), y2 = c(-5,-15,-4,-5,-10,-2,0),
                                   x2 = c(-3,-8,6,-6,-8,0,-3), value2 = c(44,12,35,168,102,41,16))
) %>>% addValueAxes(position = "bottom", axisAlpha = 0
) %>>% addValueAxes(minMaxMultiplier = 1.2, position = "left", axisAlpha = 0
) %>>% addGraph(balloonText = "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
                bullet = "circle", bulletBorderAlpha = 0.2, bulletAlpha = 0.8, lineAlpha=0,
                fillAlphas = 0, valueField = "value", xField = "x",yField = "y", maxBulletSize = 100
) %>>% addGraph(balloonText = "x:<b>[[x]]</b>y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
                bullet="diamond",bulletBorderAlpha=0.2, bulletAlpha = 0.8, lineAlpha = 0,
                fillAlphas = 0,valueField = "value2", xField = "x2", yField = "y2",
                maxBulletSize = 100
) %>>% setExport %>>% plot

gaugeChart

library(rAmChart)
amAngularGaugeChart(theme = "light"
) %>>% addArrow(value = 100
) %>>% addAxe(gaugeAxis (bottomText = "100 km/h", endValue = 220, valueInterval = 10
) %>>% addBand(color = "#00CC00", endValue = 90, startValue = 0
) %>>% addBand(color = "#ffac29", endValue = 130, startValue = 90
) %>>% addBand(color = "#ea3838", endValue = 220, startValue = 130, innerRadius = "95%")
) %>>% setExport %>>% plot

funnelChart

library(rAmChart)
amFunnelChart(theme = "light", neckHeight = "30%", neckWidth = "40%", titleField = "title",
              valueField = "value", creditsPosition = "bottom-left", 
              dataProvider = data.frame(title = c("Website visits", "Downloads"),
                                        value = c(300, 123))
) %>>% plot

Elaborated

Column and line mix

See http://www.amcharts.com/demos/column-and-line-mix/

library(rAmChart)
amSerialChart(addClassNames = TRUE, theme = "light", autoMargins = FALSE, marginLeft = 30,
              marginRight = 8, marginTop = 10, marginBottom = 26, startDuration = 1,
              categoryField = "year"
) %>>% setDataProvider(data.frame(year  =  c(2010, 2011, 2012, 2013, 2014),
                                  income  =  c(20.4, 20.6, 24.3, 21.5, 22.3), 
                                  expenses  =  c(31.5, 32.4, 25.6, 22.6, 24.9),
                                  dashLengthColumn = c(NA, NA, NA, NA, 5), 
                                  alpha = c(NA, NA, NA, NA, 0.2), 
                                  additional = c("", "", "", "", "(projection)"))
) %>>% setBalloon(adjustBorderColor = FALSE, horizontalPadding = 10,
                  verticalPadding = 8,color = "#ffffff"
) %>>% addValueAxes(axisAlpha = 0, position = "left"
) %>>% addGraph(alphaField = "alpha", fillAlphas = 1, title = "Income",
                type = "column", valueField = "income",
                balloonText = "<span style = 'font-size:12px;'>[[title]] in [[category]]:<br><span style = 'font-size:20px;'>[[value]]</span> [[additional]]</span>", 
                 dashLengthField = "dashLengthColumn"
) %>>% addGraph(id = "graph2", bullet = "round", lineThickness = 3, bulletSize = 7,
                balloonText = "<span style = 'font-size:12px;'>[[title]] in [[category]]:<br><span style = 'font-size:20px;'>[[value]]</span> [[additional]]</span>", 
                bulletBorderAlpha = 1, bulletColor = "#FFFFFF",
                useLineColorForBulletBorder = TRUE, bulletBorderThickness = 3, 
                fillAlphas = 0, lineAlpha = 1, title = "Expenses", valueField = "expenses"
) %>>% setCategoryAxis(gridPosition = "start", axisAlpha = 0, tickLength = 0
) %>>% setExport %>>% plot

Column with rotated series

See http://www.amcharts.com/demos/exporting-chart-to-image/

library(rAmChart)
amSerialChart(theme = "dark", startDuration = 2, categoryField = "country", depth3D = 40,
               angle = 30
) %>>% setDataProvider(data.frame(
  country = c("USA", "China", "Japan", "Germany", "UK", "France", "India", "Spain", "Netherlands", "Russia"), 
  visits = c(3025, 1882, 1809, 1322, 1122, 1114, 984, 711, 665, 580), 
  color = c("#FF0F00", "#FF6600", "#FF9E01", "#FCD202", "#F8FF01", "#B0DE09", "#04D215", "#0D8ECF", "#0D52D1", "#2A0CD0"))
) %>>% addGraph(balloonText = "<b>[[category]]: [[value]]</b>", fillColorsField = "color", 
                 fillAlphas = 0.85, lineAlpha = 0.1, type = "column", valueField = "visits"
) %>>% setChartCursor(categoryBalloonEnabled = FALSE, cursorAlpha = 0, zoomable = FALSE
) %>>% setCategoryAxis(gridPosition = "start", labelRotation = 45, axisAlpha = 0, gridAlpha = 0
) %>>% setExport %>>% plot

Stacked areas

See http://www.amcharts.com/demos/stacked-area/

library(rAmChart)
amSerialChart(theme = "light", marginRight = 30, plotAreaBorderAlpha = 0,
               categoryField = "year"
) %>>% setDataProvider(data.frame(
  year  =  1994:2012, 
  cars  =  c(15, 13, 14, 15, 16, 18, 19, 22, 24, 20, 24, 25, 26, 35, 36, 37, 38, 39, 40), 
  motorcycles  =  c(15, 13, 14, 15, 16, 18, 19, 22, 24, 20, 24, 25, 26, 35, 36, 37, 38, 39, 40), 
  bicycles  =  c(15, 13, 14, 15, 16, 18, 19, 22, 24, 20, 24, 25, 26, 35, 36, 37, 38, 39, 40))
) %>>% setLegend(equalWidths = FALSE, periodValueText = "total: [[value.sum]]", position = "top", valueAlign = "left", valueWidth = 100
) %>>% addValueAxes(stackType = "regular", gridAlpha = 0.07, position = "left",
                    title = "Traffic incidents"
) %>>% addGraph(balloonText = "<img src = 'http://www.amcharts.com/lib/3/images/car.png' style = 'vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style = 'font-size:14px; color:#000000;'><b>[[value]]</b></span>", 
                 fillAlphas = 0.6, hidden = TRUE, lineAlpha = 0.4, title = "Cars",
                valueField = "cars"
) %>>% addGraph(balloonText = "<img src = 'http://www.amcharts.com/lib/3/images/motorcycle.png' style = 'vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style = 'font-size:14px; color:#000000;'><b>[[value]]</b></span>", 
                 fillAlphas = 0.6, lineAlpha = 0.4, title = "Motorcycles", valueField = "motorcycles"
) %>>% addGraph(balloonText = "<img src = 'http://www.amcharts.com/lib/3/images/bicycle.png' style = 'vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style = 'font-size:14px; color:#000000;'><b>[[value]]</b></span>", 
                 fillAlphas = 0.6, lineAlpha = 0.4, title = "Bicycles", valueField = "bicycles"
) %>>% setChartCursor(cursorAlpha = 0
) %>>% setCategoryAxis(startOnAxis = TRUE, axisColor = "#DADADA", gridAlpha = 0.07
) %>>% setGuides(list(guide(category = "2001", toCategory = "2003", lineColor = "#CC0000",
                            lineAlpha = 1, fillAlpha = 0.2, fillColor = "#CC0000", dashLength = 2,
                            inside = TRUE, labelRotation = 90,
                            label = "fines for speeding increased"),
                      guide(category = "2007", lineColor = "#CC0000", lineAlpha = 1,
                            dashLength = 2, inside = TRUE, labelRotation = 90,
                            label =  "motorcycle fee introduced"))
) %>>% setExport %>>% plot

Waterfall chart

See http://www.amcharts.com/demos/waterfall-chart/

library(rAmChart)
amSerialChart(theme = "light", startDuration = 1, columnWidth = 0.6, categoryField = "name", pathToImages = "http://www.amcharts.com/lib/3/images/"
) %>>% setDataProvider( data.frame(
  name = c("Income A", "Income B", "Total Income", "Expenses A", "Expenses B", "Revenue"), 
  open  =  c(0, 11.13, 0, 12.92, 8.64, 0), 
  close =  c(11.13, 15.81, 15.81, 15.81, 12.92, 8.64), 
  color  =  c("#54cb6a", "#54cb6a", "#169b2f", "#cc4b48", "#cc4b48", "#1c8ceb"), 
  balloonValue  =  c(11.13, 4.68, 15.81, 2.89, 4.24, 11.13) )
) %>>% addValueAxes(axisAlpha = 0, gridAlpha = 0.1, position = "left"
) %>>% addGraph(balloonText = "<span style = 'color:[[color]]'>[[category]]</span><br><b>$[[balloonValue]] Mln</b>", 
                 colorField = "color", fillAlphas = 0.8, labelText = "$[[balloonValue]]",
                lineColor = "#BBBBBB", openField = "open", type = "column", valueField = "close"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Income B",
                    finalValue = 11.13, initialCategory = "Income A",
                    initialValue = 11.13, lineColor = "#888888"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Expenses A", finalValue = 15.81, initialCategory = "Income B", initialValue = 15.81, lineColor = "#888888"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Expenses A",
                    finalValue = 15.81, initialCategory = "Income B",
                    initialValue = 15.81, lineColor = "#888888"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Expenses B",
                    finalValue = 12.92, initialCategory = "Expenses A",
                    initialValue = 12.92, lineColor = "#888888"
) %>>% addTrendLine(dashLength = 3, finalCategory = "Revenue", finalValue = 8.64,
                    initialCategory = "Expenses B", initialValue = 8.64, lineColor = "#888888"
) %>>% setCategoryAxis(gridPosition = "start", axisAlpha = 0, gridAlpha = 0.1
) %>>% setExport %>>% plot

Candle stick chart

See http://www.amcharts.com/demos/candlestick-chart/

library(rAmChart)
amSerialChart(categoryField = "date", theme = "light", dataDateFormat = "YYYY-MM-DD"
) %>>% setDataProvider(data.frame (date = paste0(2011, "-", 8:11, "-", replicate(4, 1:30)),
                                     open = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 130, 140), 2), 
                                     high = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 140, 150), 2),
                                     low = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 120, 130), 2),
                                     close = round(runif(length(paste0(2011, "-", 8:11, "-", replicate(4, 1:30))), 120, 150), 2))
) %>>% addValueAxes(position = "left"
) %>>% addGraph(id = "g1",
                 balloonText = "Open : <b>[[open]]</b><br>Low =<b>[[low]]</b><br>High =<b>[[high]]</b><br>Close =<b>[[close]]</b><br>",
                 closeField = "close", fillColors = "#7f8da9", highField = "high",
                 lineColor = "#7f8da9", lineAlpha = 1, lowField = "low",
                 fillAlphas = "0.9",  negativeFillColors = "#db4c3c", negativeLineColor = "#db4c3c",
                 openField = "open", title = "Price:", type = "candlestick", valueField = "close"
) %>>% setChartCursor(valueLineEnabled = TRUE, valueLineBalloonEnabled = TRUE
) %>>% setChartScrollbar(graph = "g1"
) %>>% addListener("rendered", "function(event) { event.chart.zoomToIndexes(event.chart.dataProvider.length - 10, event.chart.dataProvider.length - 1) }"
) %>>% setExport(position = "top-left") %>>% plot

Stock chart with multiple data sets

See http://www.amcharts.com/demos/multiple-data-sets/

library(rAmChart)
firstDate <- Sys.Date()
chartData1 <- as.data.frame(t(sapply(0:20, FUN = function(i)
{
  date <- format(firstDate + i, "%m/%d/%Y")
  a <- round(runif(1) * (40 + i)) + 100 + i
  b <- round(runif(1) * (1000 + i)) + 500 + i * 2
  c(date = date, value = a,  volume = b)
})))

chartData2 <- as.data.frame(t(sapply(0:20, FUN = function(i)
{
  date <- format(firstDate + i, "%m/%d/%Y")
  a <- round(runif(1) * (100 + i)) + 200 + i
  b <- round(runif(1) * (1000 + i)) + 600 + i * 2
  c(date = date, value = a,  volume = b)
})))

chartData3 <- as.data.frame(t(sapply(0:20, FUN = function(i)
{
  date <- format(firstDate + i, "%m/%d/%Y")
  a <- round(runif(1) * (100 + i)) + 200 + i
  b <- round(runif(1) * (1000 + i)) + 600 + i * 2
  c(date = date, value = a,  volume = b)
})))

chartData4 <- as.data.frame(t(sapply(0:20, FUN = function(i)
{
  date <- format(firstDate + i, "%m/%d/%Y")
  a <- round(runif(1) * (100 + i)) + 200 + i
  b <- round(runif(1) * (1000 + i)) + 600 + i * 2
  c(date = date, value = a,  volume = b)
})))

amStockChart(theme = "light"
) %>>% addDataSet(dataSet(title = "first data set", categoryField = "date",
                            dataProvider = chartData1) %>>%
                     addFieldMapping(fromField = "value", toField = "value") %>>%
                     addFieldMapping(fromField = "volume", toField = "volume")
) %>>% addDataSet(dataSet(title = "second data set", categoryField = "date",
                            dataProvider = chartData2) %>>%
                     addFieldMapping(fromField = "value", toField = "value") %>>%
                     addFieldMapping(fromField = "volume", toField = "volume")
) %>>% addDataSet(dataSet(title = "third data set", categoryField = "date",
                            dataProvider = chartData3) %>>%
                     addFieldMapping(fromField = "value", toField = "value") %>>%
                     addFieldMapping(fromField = "volume", toField = "volume")
) %>>% addDataSet(dataSet(title = "fourth data set", categoryField = "date",
                            dataProvider = chartData4) %>>%
                     addFieldMapping(fromField = "value", toField = "value") %>>%
                     addFieldMapping(fromField = "volume", toField = "volume")
) %>>% addPanel(stockPanel(showCategoryAxis = FALSE, title = "Value", percentHeight = 70) %>>%
                   addStockGraph(id = "g1", valueField = "value", comparable = TRUE,
                                 compareField = "value", balloonText = "[[title]] =<b>[[value]]</b>",
                                 compareGraphBalloonText = "[[title]] =<b>[[value]]</b>"
                  ) %>>% setStockLegend(periodValueTextComparing = "[[percents.value.close]]%",
                                          periodValueTextRegular = "[[value.close]]")
) %>>% addPanel(stockPanel(title = "Volume", percentHeight = 30) %>>%
                   addStockGraph(valueField = "volume", type = "column",
                                 fillAlphas = 1) %>>%
                   setStockLegend(periodValueTextRegular = "[[value.close]]")
) %>>% setChartScrollbarSettings(graph = "g1"
) %>>% setChartCursorSettings(valueBalloonsEnabled = TRUE, fullWidth = TRUE,
                               cursorAlpha = 0.1, valueLineBalloonEnabled = TRUE,
                               valueLineEnabled = TRUE, valueLineAlpha = 0.5
) %>>% setPeriodSelector(periodSelector(position = "left") %>>%
                            addPeriod(period = "MM", selected = TRUE, count = 1, label = "1 month") %>>%
                            addPeriod(period = "MAX", label = "MAX")
) %>>% setDataSetSelector(position = "left"
) %>>% setPanelsSettings(recalculateToPercents = FALSE
) %>>% plot

Stock chart with dates

See http://www.amcharts.com/demos/multiple-data-sets/

library(rAmChart)
start <- as.POSIXct("01-01-2015", format = "%d-%m-%Y")
end <- as.POSIXct("31-12-2015", format = "%d-%m-%Y")
period <- seq.POSIXt(from = start, to = end, by = "10 min")
n <- length(period)
periodTemp <- seq.POSIXt(from = start, to = end, by = "3 hour")
nTemp <- length(periodTemp)
### Generate mesures ----
charge <- rnorm(n, mean = 500, sd= 200)
charge[ which(charge < 0) ] <- rnorm(length(which(charge < 0)), mean = 200, sd = 10)
temp <- rnorm(nTemp, mean = 15, sd = 10)
dtCharge <- data.table::data.table(charge, date = period)
setkey(dtCharge, date)
dtTemp <- data.table::data.table(temperature = temp, date = periodTemp)
setkey(dtTemp , date)
dp <- dtTemp[dtCharge]
dp[ , date := format(date, "%m-%d-%Y %H:%M:%S")]

nTest <- 10000
sample <- 1:nTest
amStockChart(theme = "default" , dataDateFormat = "MM-DD-YYYY JJ:NN:SS"
) %>>% addDataSet(dataSet(title = "Courbe de charge", categoryField = "date") %>>%
                    setDataProvider(dp[ sample, ], keepNA = FALSE) %>>%
                    addFieldMapping(fromField = "charge", toField = "charge") %>>%
                    addFieldMapping(fromField = "temperature", toField = "temperature") %>>%
                    addStockEvent( date = "01-02-2015 23:00:00", type = "sign", graph ="g1",
                                    text = "I am a stockEvent", description = "I am a property of a DataSet")
) %>>% addPanel(stockPanel(showCategoryAxis = FALSE, title = "Charge", percentHeight = 70) %>>%
                   addStockGraph(id = "g1", valueField = "charge", comparable = TRUE,
                                 compareField = "charge", balloonText = "[[title]] =<b>[[value]]</b>",
                                 compareGraphBalloonText = "[[title]] =<b>[[value]]</b>"
                  ) %>>% setStockLegend(periodValueTextComparing = "[[percents.value.close]]%",
                                          periodValueTextRegular = "[[value.close]]")
) %>>% addPanel(stockPanel(title = "Temperature", percentHeight = 30) %>>%
                   addStockGraph(valueField = "temperature", fillAlphas = 1) %>>%
                   setStockLegend(periodValueTextRegular = "[[value.close]]")
) %>>% setChartScrollbarSettings(graph = "g1"
) %>>% setChartCursorSettings(valueBalloonsEnabled = TRUE, fullWidth = TRUE,
                               cursorAlpha = 0.1, valueLineBalloonEnabled = TRUE,
                               valueLineEnabled = TRUE, valueLineAlpha = 0.5
) %>>% setPeriodSelector(periodSelector(position = "left") %>>%
                            addPeriod(period = "MM", selected = TRUE,
                                      count = 1, label = "1 month") %>>%
                            addPeriod(period = "MAX", label = "MAX")
) %>>% setDataSetSelector(position = "left"
) %>>% setCategoryAxesSettings(minPeriod = "ss"
) %>>% setPanelsSettings(recalculateToPercents = FALSE
) %>>% plot